<script lang="ts" setup>
import ComHeader from '../../components/Header.vue';
import ComFooter from '../../components/Footer.vue';
const clientMap = {
  直播演艺: [
    { img: new URL('@assets/client/1.png', import.meta.url).href, text: '签约主播' },
    { img: new URL('@assets/client/2.png', import.meta.url).href, text: '签约艺人' },
  ],
  知识分享: [
    { img: new URL('@assets/client/3.png', import.meta.url).href, text: '知识讲师' },
    { img: new URL('@assets/client/4.png', import.meta.url).href, text: '文章作者' },
  ],
  共享出行: [
    { img: new URL('@assets/client/5.png', import.meta.url).href, text: '共享单车' },
    { img: new URL('@assets/client/6.png', import.meta.url).href, text: '共享充电宝' },
    { img: new URL('@assets/client/7.png', import.meta.url).href, text: '打车平台' },
  ],
  生活服务: [
    { img: new URL('@assets/client/8.png', import.meta.url).href, text: '外卖骑手' },
    { img: new URL('@assets/client/9.png', import.meta.url).href, text: '物流配送' },
  ],
};

const businesss = [
  {
    title: '个体纳税人遵从度低',
    text: '大量自由者没有进行自主申报，主要原因：一十个人纳税意识淡薄；二是出于自身利益最大化考虑，可以隐藏交易行为。',
  },
  {
    title: '共享经济平台成本较高',
    text: '难以将自由职业者所得记为收入，无进项发票。',
  },
  {
    title: '纳税主体信息缺乏',
    text: '共享经济面对大量自由职业者，如何精准识别纳税人具体信息，给税务机关带来了挑战。',
  },
  {
    title: '所得归类与项目适用难度大',
    text: '经济行为重存在多种涉税项目难以区分，因此共享经济种大量服务难以明确课税对象',
  },
  {
    title: '纳税人的真实营业额难以确认',
    text: '共享经济涉及人数较多、行业较广，不利于税务机关信息采集以及后续税收管理。',
  },
];

const moduleMap = {
  企业客户: [
    {
      title: '入驻审核',
      text: '提供风控资料',
    },
    {
      title: '签约',
      text: '与海南湾道签订综合服务合作协议（支持线上签约）',
    },
    {
      title: '开户',
      text: '开通结算系统商户',
    },
    {
      title: '接受服务',
      text: '接受海南湾道提供的综合服务',
    },
    {
      title: '支付结算',
      text: '与海南湾道结算并支付费用',
    },
    {
      title: '开票',
      text: '获得发票',
    },
  ],
  自由职业者: [
    {
      title: '实名认证',
      text: '实名认证',
    },
    {
      title: '签约',
      text: '与海南湾道签订服务合作协议',
    },
    {
      title: '承揽人物',
      text: '承揽综合服务相关任务',
    },
    {
      title: '提供服务',
      text: '完成相关任务',
    },
    {
      title: '提现/结算',
      text: '',
    },
    {
      title: '获得收入',
      text: '',
    },
  ],
};

const cooperations = [
  {
    img: new URL('@assets/cooperation/1.png', import.meta.url).href,
    title: '结算通道多样，主流渠道全覆盖',
    text: '支持400多家银行银行卡，支持支付宝等主流第三方支付平台。',
  },
  {
    img: new URL('@assets/cooperation/2.png', import.meta.url).href,
    title: '服务经验丰富，设计众多行业',
    text: '服务诸多上市以及行业头部企业，覆盖文化娱乐、金融服务、物流配送、知识分享、在线教育等各行业，承接新经济业态下自由职业者人力及财务业务整包服务。',
  },
  {
    img: new URL('@assets/cooperation/3.png', import.meta.url).href,
    title: '总分包模式，确保业务合规',
    text: '作为总包方整体承包共享经济平台企业自由职业者人力及财务业务，为分包方提供结算以及个税代征服务，确保全业务流程最高合规性。',
  },
  {
    img: new URL('@assets/cooperation/4.png', import.meta.url).href,
    title: '风险控制，自由职业者身份要素鉴定',
    text: '通过人脸识别、姓名、身份证等要素的对比，对自由职业者进行对比',
  },
];
</script>

<template>
  <section class="page">
    <ComHeader></ComHeader>
    <main class="page__main">
      <section class="banner">
        <p class="banner__text">共享经济财税解决方案服务平台</p>
        <p class="banner__text">佣金结算、财务报税的一站式票据服务平台</p>
      </section>
      <section class="client">
        <h2 class="title">主要客户群体</h2>
        <h3 class="subtitle">共享经济类企业</h3>
        <ul class="client__items">
          <li class="client__item card" v-for="(items, title) in clientMap">
            <h4 class="card__title">{{ title }}</h4>
            <ul class="card__items">
              <li class="card__item" v-for="item in items">
                <img class="card__img" :src="item.img" :alt="item.text" />
                <p class="card__text">{{ item.text }}</p>
              </li>
            </ul>
          </li>
        </ul>
      </section>
      <section class="business">
        <h2 class="title">解决业务痛点</h2>
        <h3 class="subtitle">共享经济快速发展，自由职业者税收管理面临挑战。</h3>
        <ul class="business__items">
          <li class="business__item" v-for="item in businesss">
            <h4 class="business__title">{{ item.title }}</h4>
            <p class="business__text">{{ item.text }}</p>
          </li>
        </ul>
      </section>
      <section class="service">
        <h2 class="title">提供一站式服务的软件系统</h2>
        <div class="service__con">
          <p class="service__text">
            为平台企业提供审核确认材料(业务合规诊断)、平台系统设计、组织开展产品推广及拓客，包括拜访潜在客户参与谈判，进行推广，平台系统设计等服务外包工作。
          </p>
        </div>
      </section>
      <section class="module">
        <h2 class="title">业务合作模式</h2>
        <div class="module__con">
          <img class="module__img" src="@assets/module.jpg" alt="合作模式" />
          <img class="module__img" src="@assets/module1.jpg" alt="合作流程" />
        </div>
      </section>
      <section class="cooperation">
        <h2 class="title">合作优势</h2>
        <ul class="cooperation__items">
          <li class="cooperation__item" v-for="item in cooperations">
            <img class="cooperation__img" :src="item.img" :alt="item.title" />
            <div class="cooperation__texts">
              <h4 class="cooperation__title">{{ item.title }}</h4>
              <p class="cooperation__text">{{ item.text }}</p>
            </div>
          </li>
        </ul>
      </section>
    </main>
    <ComFooter />
  </section>
</template>

<style lang="scss" scoped>
@font-face {
  font-family: 'AaWuHunTi';
  src: url('@assets/font/AaWuHunTi.ttf');
}
.page {
  position: relative;
  color: #333333;
  background-color: #f5f5f5;

  @at-root &__main {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
.title {
  font-size: 28px;
  text-align: center;
  font-weight: bold;
  line-height: 48px;
}
.subtitle {
  font-size: 18px;
  text-align: center;
  font-weight: 400;
  line-height: 32px;
}
.banner {
  position: relative;
  width: 100%;
  height: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: url('@assets/main.jpg');
  background-size: 100% 100%;
  color: #fff;
  background-color: #225097;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba($color: #094695, $alpha: 0.65);
  }

  @at-root &__text {
    z-index: 1;
    font-size: 54px;
    font-weight: bold;
    text-align: center;
    line-height: 88px;
    letter-spacing: 2px;
  }
}
.client {
  padding-top: 80px;
  padding-bottom: 60px;

  @at-root &__items {
    margin-top: 60px;
    width: 900px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  @at-root &__item {
    margin-bottom: 32px;
    margin-right: 32px;
    position: relative;
    flex: 1 0 30%;

    &:nth-child(2n) {
      margin-right: 0;
    }
  }
}
.card {
  padding: 20px;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 2px 4px 8px #ecedef;

  @at-root &__title {
    font-size: 18px;
    text-align: center;
    line-height: 48px;
  }

  @at-root &__items {
    margin-top: 20px;
    display: flex;
    justify-content: space-around;
  }

  @at-root &__item {
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  @at-root &__img {
    width: 40px;
    height: 40px;
  }

  @at-root &__text {
    font-size: 15px;
    text-align: center;
    line-height: 40px;
    color: #000;
  }
}
.business {
  padding-top: 80px;
  padding-bottom: 30px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #ffffff;
  background-color: #1555a6;

  @at-root &__items {
    margin-top: 60px;
    width: 1000px;
  }

  @at-root &__item {
    margin-bottom: 20px;
    padding: 20px 32px;
    background-color: rgba($color: #ffffff, $alpha: 0.1);
    // box-shadow: 2px 4px 10px #c8ccd1;
    border-radius: 6px;
    box-sizing: border-box;

    &:last-child {
      border: 0;
    }
  }

  @at-root &__title {
    font-size: 16px;
    line-height: 32px;
  }

  @at-root &__text {
    font-size: 15px;
    line-height: 32px;
    opacity: 0.85;
  }
}
.service {
  padding-top: 80px;
  padding-bottom: 60px;

  @at-root &__con {
    z-index: 0;
    margin-top: 60px;
    padding: 3px;
    background-color: #ffffff;
    border: 2px solid #1555a6;
    border-radius: 12px;
  }

  &__text {
    padding: 60px 100px;
    width: 800px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    text-align: center;
    line-height: 32px;
    color: #fff;
    background-color: #2364b7;
    border-radius: 10px;
    box-sizing: border-box;
  }
}
.module {
  padding-top: 80px;
  padding-bottom: 60px;
  width: 100%;
  background-color: #ffffff;

  @at-root &__con {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  @at-root &__img {
    margin-top: 52px;
    width: 800px;
  }
}
.cooperation {
  padding-top: 80px;
  padding-bottom: 30px;

  @at-root &__items {
    margin-top: 40px;
    width: 1000px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  @at-root &__item {
    margin-bottom: 32px;
    margin-right: 32px;
    padding: 16px 40px;
    flex: 1 0 40%;
    display: flex;
    color: #ffffff;
    background-color: #1555a6;
    border-radius: 12px;
    box-sizing: border-box;

    &:nth-child(2n) {
      margin-right: 0;
    }
  }

  @at-root &__img {
    margin-top: 32px;
    width: 54px;
    height: 54px;
  }

  @at-root &__texts {
    margin-left: 40px;
  }

  @at-root &__title {
    font-size: 18px;
    line-height: 48px;
  }

  @at-root &__text {
    font-size: 16px;
    line-height: 28px;
    opacity: 0.85;
  }
}
</style>
